<template>
	<view class="container">
		<!-- 基本信息 -->
		<view class="info-section">
			<view class="section-title">基本信息</view>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">询价单编号:</text>
					<text class="info-value">{{ inquiryInfo.inquiry_number }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">状态:</text>
					<text class="info-value status">{{ inquiryInfo.status_text }}</text>
				</view>
				<view class="info-row" v-if="shareUserId === 0">
					<text class="info-label">创建时间:</text>
					<text class="info-value">{{ inquiryInfo.create_time_formatted }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">截止时间:</text>
					<text class="info-value deadline">{{ inquiryInfo.deadline_formatted }}</text>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-section">
			<view class="section-title">商品列表</view>
			<view class="product-table">
				<!-- 表头 -->
				<view class="table-header">
					<view class="header-cell checkbox">
						<view class="radio-item" :class="{ checked: allSelected }" @click="toggleSelectAll">
							<text class="radiomark" v-if="allSelected"></text>
						</view>
					</view>
					<view class="header-cell model">型号</view>
					<view class="header-cell brand">品牌</view>
					<view class="header-cell quantity">需求数量</view>
					<view class="header-cell status">状态</view>
				</view>

				<!-- 商品行 -->
				<view class="table-row" v-for="(product, index) in products" :key="product.id">
					<view class="row-cell checkbox">
						<view class="radio-item" :class="{ checked: product.checked }"
							@click="toggleProductSelection(index)">
							<text class="radiomark" v-if="product.checked">✓</text>
						</view>
					</view>
					<view class="row-cell model">{{ product.product_model }}</view>
					<view class="row-cell brand">{{ product.brand_name }}</view>
					<view class="row-cell quantity">{{ product.required_quantity }}</view>
					<view class="row-cell status">
						<!-- <text class="status-tag" :class="product.selected ? 'selected' : 'optional'">
							{{ product.selected ? '已选' : '可选' }}
						</text> -->
						<text v-if="product.status == 'pending'"
							class="status-tag selected">{{product.status_text}}</text>
						<text v-else-if="product.status == 'quoted'"
							class="status-tag selected">{{product.status_text}}</text>
						<text v-else-if="product.status == 'ordered'" class="status-tag optional">已下单</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<view v-if="shareUserId > 0" class="action-btn select-quote" @click="toQuote()"
				:class="{ disabled: !hasSelectedProduct }">
				立即报价
			</view>
			<view v-if="shareUserId === 0" class="action-btn select-quote" @click="selectQuote"
				:class="{ disabled: !hasSelectedProduct }">
				选择报价
			</view>
			<view v-if="shareUserId === 0" class="action-btn generate" @click="generateOrder"
				:class="{ disabled: !hasSelectedProduct }">
				确认订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				inquiryInfo: {},
				products: [],
				shareUserId: 0,
			};
		},
		computed: {
			// 检查是否有选中的商品
			hasSelectedProduct() {
				return this.products.some(product => product.checked);
			},
			// 检查是否可以生成订单
			canGenerateOrder() {
				return this.products.some(product => product.checked && product.status === 'quoted');
			},
			// 检查是否全选
			allSelected() {
				if (this.products.length === 0) return false;
				return this.products.every(product => product.checked);
			}
		},
		onLoad(option) {
			this.id = option.id;
			if (option.shareUserId && option.shareUserId != this.$store.state.user.id) {
				this.shareUserId = option.shareUserId;
			}
		},
		onShow() {
			this.loadData(this.id);
		},
		onShareAppMessage() {
			return {
				title: '这是我的询价单，感兴趣快来报个价吧！', //分享的标题
				path: '/pages/future/detail?shareUserId=' + this.$store.state.user.id + '&id=' + this.id, //好友点击分享之后跳转的页面
			}
		},
		methods: {
			loadData(id) {
				uni.$uv.http.get('/inquiry/inquiryDetail', {
					params: {
						inquiry_id: id
					},
				}).then(res => {
					if (res.res.code == 1) {
						this.inquiryInfo = res.res.data.inquiry;
						this.products = res.res.data.products.map(item => ({
							...item,
							checked: false,
							selected: item.status === 'quoted' ? true : false
						}));
						return;
					}
					this.$wanlshop.msg(res.res.msg, 3000, true, 'none');
				}).catch(error => {
					this.$wanlshop.msg('获取失败，请稍后重试', 2000, true)
				});
			},
			// 去报价
			toQuote() {
				const selectedProducts = this.products.filter(product => product.checked);
				if (selectedProducts.length === 0) {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none'
					});
					return;
				}

				// 这里可以根据需求决定是批量报价还是单个报价
				// 如果是批量报价，可以传递所有选中的商品
				// 如果是单个报价，可以提示用户只能选择一个商品
				if (selectedProducts.length > 1) {
					this.$wanlshop.msg('请选择单个商品进行报价！');
				} else {
					uni.showModal({
						title: '立即报价',
						content: `确定要为商品 ${selectedProducts[0].product_model} 报价吗？`,
						success: (res) => {
							if (res.confirm) {
								this.$wanlshop.to("/pages/future/quote?info=" + JSON.stringify(
									selectedProducts[0]));
							}
						}
					});
				}
			},
			// 切换商品选择状态
			toggleProductSelection(index) {
				this.products[index].checked = !this.products[index].checked;
			},
			// 全选/取消全选
			toggleSelectAll() {
				const newState = !this.allSelected;
				this.products.forEach(product => {
					product.checked = newState;
				});
			},
			// 选择报价
			selectQuote() {
				const selectedProducts = this.products.filter(product => product.checked);
				if (selectedProducts.length === 0) {
					this.$wanlshop.msg('请先选择商品');
					return;
				} else if (selectedProducts.length > 1) {
					this.$wanlshop.msg('只能选择一个商品进行报价');
					return;
				}

				// 获取选中的商品ID和型号
				const productId = selectedProducts.map(product => product.id);
				const productModel = selectedProducts.map(product => product.product_model);

				// 跳转到报价选择页面，传递多个商品信息
				this.$wanlshop.to(
					`/pages/future/choose?productId=${productId}&productModel=${productModel}`
				)
			},
			// 生成订单
			generateOrder() {
				const products = this.products.filter(product => product.checked);
				if (products.length === 0) {
					this.$wanlshop.msg('请先选择商品再确认订单');
					return;
				} else if (products.some(product => product.status === 'pending')) {
					this.$wanlshop.msg('请先为商品选择报价后，再确认订单');
					return;
				} else if (products.some(product => product.status === 'ordered')) {
					this.$wanlshop.msg('选中商品中存在已提交订单，无法重复提交！');
					return;
				}

				const data = {
					inquiry_number: this.inquiryInfo.inquiry_number,
					products: products
				}
				// 跳转到订单确认页面
				setTimeout(() => {
					this.$wanlshop.to('/pages/future/order/addorder?data=' + JSON.stringify(data))
				}, 1500);
			},
			// 清除报价选择存储
			clearQuoteSelectionStorage() {
				try {
					uni.removeStorageSync('selectedQuote');
				} catch (e) {
					console.error('清除报价选择存储失败:', e);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 140rpx;
	}

	.info-section,
	.product-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-card {
		.info-row {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info-label {
				font-size: 28rpx;
				color: #666;
				margin-right: 16rpx;
				white-space: nowrap;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-right: 40rpx;

				&.status {
					background-color: #e6f7ff;
					color: #1890ff;
					padding: 6rpx 14rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
				}

				&.deadline {
					color: #fe6600;
					font-weight: bold;
				}
			}
		}
	}

	.product-table {
		.table-header {
			display: flex;
			background-color: #f9f9f9;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;

			.header-cell {
				font-size: 26rpx;
				font-weight: bold;
				color: #333;
				text-align: center;

				&.checkbox {
					width: 60rpx;
				}

				&.model {
					flex: 1.5;
				}

				&.brand {
					flex: 1;
				}

				&.quantity {
					flex: 1.5;
				}

				&.status {
					flex: 1;
				}
			}
		}

		.table-row {
			display: flex;
			align-items: center;
			padding: 24rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.row-cell {
				font-size: 26rpx;
				color: #333;
				text-align: center;

				&.checkbox {
					width: 60rpx;

					.radio-item {
						width: 36rpx;
						height: 36rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&.checked {
							background-color: #fe6600;
							border-color: #fe6600;
						}

						.radiomark {
							color: #fff;
							font-size: 24rpx;
							font-weight: bold;
						}
					}
				}

				&.model {
					flex: 1.5;
					font-weight: 500;
				}

				&.brand {
					flex: 1;
				}

				&.quantity {
					flex: 1.5;
				}

				&.status {
					flex: 1;

					.status-tag {
						font-size: 22rpx;
						padding: 6rpx 12rpx;
						border-radius: 12rpx;

						&.optional {
							background-color: #f6f6f6;
							color: #999;
						}

						&.selected {
							background-color: #fff2e8;
							color: #fe6600;
						}
					}
				}
			}
		}
	}

	.action-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);

		.action-btn {
			flex: 1;
			padding: 24rpx;
			text-align: center;
			border-radius: 8rpx;
			font-size: 30rpx;
			font-weight: 500;
			margin: 0 10rpx;

			&.select-quote {
				background-color: #fff;
				color: #fe6600;
				border: 1rpx solid #fe6600;

				&.disabled {
					background-color: #f5f5f5;
					color: #ccc;
					border-color: #e0e0e0;
				}
			}

			&.generate {
				background-color: #fe6600;
				color: #fff;

				&.disabled {
					background-color: #ccc;
					color: #999;
				}
			}
		}
	}
</style>